/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-23 15:46:26
 */
import { FormBasicData, FormConfig, FormUpload } from '@/components'
import { DoType, getDoTypeTitle } from '@/interfaces'
import { errorTips, successTips } from '@/utils'
import { isTrue } from '@/utils/tools'
import { clone, equals } from 'ramda'
import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue'
import { BasicDataModule } from '@/store/modules/basicData'
import { useRoute } from 'vue-router'
const props = {
	visible: {
		type: Boolean as PropType<boolean>,
		required: true,
	},
	dataSource: {
		type: Object as PropType<defs.server.MoviesEpisodeEntity>,
	},
} as const
export default defineComponent({
	props,
	name: 'CreateIndex',
	emits: ['cancel', 'search'],
	setup(props, { emit }) {
		const $route = useRoute()
		const rules = {
			name: [{ required: true, message: '请输入分类名称', trigger: 'change' }],
			introduction: [{ required: true, message: '请输入介绍', trigger: 'change' }],
			sort: [{ required: true, type: 'number', message: '请输入排序值', trigger: 'change' }],
			status: [{ required: true, message: '请选择是否上架', trigger: 'change' }],
			free: [{ required: true, type: 'number', message: '请选择是否收费', trigger: 'change' }],
			isRecommend: [{ required: true, type: 'number', message: '请选择是否推荐', trigger: 'change' }],
			playCount: [{ required: true, type: 'number', message: '请选择播放量', trigger: 'change' }],
			collectCount: [{ required: true, type: 'number', message: '请选择点赞数', trigger: 'change' }],
			likeCount: [{ required: true, type: 'number', message: '请选择收藏数', trigger: 'change' }],
			lang: [{ required: true, message: '请选择语言', trigger: 'change' }],
			episodeNumber: [{ required: true, type: 'number', message: '请输入当前集数', trigger: 'change' }],
		}
		const pageState = reactive({
			loading: false,
			type: DoType.create,
			formData: {} as defs.server.MoviesEpisodeEntity,
		})
		function cancel() {
			pageState.type = DoType.create
			pageState.formData = {} as defs.server.MoviesEpisodeEntity
			pageState.loading = false
			emit('cancel')
		}
		async function submit() {
			const params = {
				name: pageState.formData.name,
				cover: pageState.formData.cover,
				episodeNumber: pageState.formData.episodeNumber,
				mp4: pageState.formData.mp4,
				amount: pageState.formData.amount,
				free: pageState.formData.free,
				status: pageState.formData.status,
				likeCount: pageState.formData.likeCount,
				playCount: pageState.formData.playCount,
				collectCount: pageState.formData.collectCount,
				id: pageState.formData.id as number,
				movieId: Number($route.params.id),
			}
			const func = equals(pageState.type, DoType.create)
				? API.server.moviesEpisode.createEpisode.request
				: API.server.moviesEpisode.updateEpisode.request
			pageState.loading = true
			const { success, msg } = await func(params)
			pageState.loading = false
			if (success) {
				successTips(`${getDoTypeTitle(pageState.type)}成功`)
				cancel()
				emit('search')
				BasicDataModule.getCategoryList()
				return
			}
			errorTips(msg)
		}
		watch(
			() => props.visible,
			(visible) => {
				if (visible) {
					pageState.formData = clone(props.dataSource) ?? {} as defs.server.MoviesEpisodeEntity
					pageState.type = isTrue(props.dataSource?.id) ? DoType.edit : DoType.create
				}
			}
		)
		return () => (
			<div>
				<a-modal
					title={`${getDoTypeTitle(pageState.type)}分类`}
					visible={props.visible}
					onCancel={cancel}
					footer={null}
					centered
					confirmLoading={pageState.loading}
					width={'60%'}
				>
					<a-form
						class="ant-advanced-search-form"
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 14 }}
						model={pageState.formData}
						rules={rules}
						onFinish={submit}
					>
						<a-row>
							<a-col span={12}>
								<a-form-item name="cover" style={{ textAlign: 'center' }} label="封面">
									<FormUpload
										style={{ width: '150px', aspectRatio: 3 / 4, margin: '0 auto' }}
										v-model={[pageState.formData.cover, 'src']}
									>
									</FormUpload>
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="mp4" style={{ textAlign: 'center' }} label="视频资源">
									<FormUpload
										style={{ width: '150px', aspectRatio: 3 / 4, margin: '0 auto' }}
										v-model={[pageState.formData.mp4, 'src']}
									>
										<video style="width: 150px; aspect-ratio: 9 / 16; object-fit: cover" controls preload="none">
											<source src={pageState.formData.mp4} type="video/mp4" />
											您的浏览器不支持视频标签。
										</video>
									</FormUpload>
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="name" label="剧集标题">
									<a-input v-model={[pageState.formData.name, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="episodeNumber" label="编号">
									<a-input-number min={0} v-model={[pageState.formData.episodeNumber, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="free" label="是否收费">
									<FormConfig prop="freeType" v-model={[pageState.formData.free, 'value']} />
								</a-form-item>
							</a-col>
							{
								equals(pageState.formData.free, 2) && (
									<a-col span={12}>
										<a-form-item name="amount" label="金额">
											<a-input-number min={0} v-model={[pageState.formData.amount, 'value']} />
										</a-form-item>
									</a-col>
								)
							}
							<a-col span={12}>
								<a-form-item name="playCount" label="播放量">
									<a-input-number min={0} v-model={[pageState.formData.playCount, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="status" label="是否上架">
									<FormConfig prop="status" v-model={[pageState.formData.status, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="likeCount" label="点赞数">
									<a-input-number min={0} v-model={[pageState.formData.likeCount, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="playCount" label="播放量">
									<a-input-number min={0} v-model={[pageState.formData.playCount, 'value']} />
								</a-form-item>
							</a-col>
							<a-col span={12}>
								<a-form-item name="collectCount" label="收藏量">
									<a-input-number min={0} v-model={[pageState.formData.collectCount, 'value']} />
								</a-form-item>
							</a-col>
						</a-row>
						<div style={{ textAlign: 'center' }}>
							{[DoType.create, DoType.edit].includes(pageState.type) && (
								<a-button type="primary" loading={pageState.loading} html-type="submit">
									提交
								</a-button>
							)}
							<a-button onClick={cancel}>取消</a-button>
						</div>
					</a-form>
				</a-modal>
			</div>
		)
	},
})
